import React, { memo } from "react";
import { CommonTitleLeft, CommonTitleRight, CommonTitleWrapper } from "./style";
import PropTypes from "prop-types";

const CommonTitle = memo(function (props) {
  const { titleName, keywords } = props;
  return (
    <CommonTitleWrapper className="sprite_02">
      <CommonTitleLeft>
        <h2 className="title">{titleName}</h2>
        <div className="keywords">
          {keywords.map((item, index) => {
            return (
              <div key={item}>
                <a href="todo">{item}</a>
                {index < keywords.length - 1 && <span className="line">|</span>}
              </div>
            );
          })}
        </div>
      </CommonTitleLeft>
      <CommonTitleRight>
        <a href="todo" className="more">
          更多
        </a>
      </CommonTitleRight>
    </CommonTitleWrapper>
  );
});

CommonTitle.propTypes = {
  titleName: PropTypes.string.isRequired,
  keywords: PropTypes.array,
};

CommonTitle.defaultProps = {
  keywords: [],
};

export default CommonTitle;
